<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>个人设置 - BodyGuard体重管理</title>
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
  <style>
    body {
      background-color: #f5f5f5;
      height: 100vh;
      width: 100%;
      overflow: hidden;
      position: relative;
    }
    .page-content {
      height: calc(100vh - 112px);
      overflow-y: auto;
      padding-bottom: 60px;
    }
    .card-shadow {
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    }
    .avatar {
      width: 80px;
      height: 80px;
      border-radius: 50%;
      object-fit: cover;
      border: 3px solid white;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }
    .menu-item {
      display: flex;
      align-items: center;
      padding: 1rem;
      border-bottom: 1px solid #f0f0f0;
    }
    .menu-item:last-child {
      border-bottom: none;
    }
    .menu-icon {
      width: 2rem;
      height: 2rem;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 1rem;
    }
    .toggle-switch {
      position: relative;
      display: inline-block;
      width: 44px;
      height: 24px;
    }
    .toggle-switch input {
      opacity: 0;
      width: 0;
      height: 0;
    }
    .toggle-slider {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: #ccc;
      border-radius: 24px;
      transition: .3s;
    }
    .toggle-slider:before {
      position: absolute;
      content: "";
      height: 18px;
      width: 18px;
      left: 3px;
      bottom: 3px;
      background-color: white;
      border-radius: 50%;
      transition: .3s;
    }
    input:checked + .toggle-slider {
      background-color: #10b981;
    }
    input:checked + .toggle-slider:before {
      transform: translateX(20px);
    }
  </style>
</head>
<body>
  <!-- 导入状态栏和微信导航栏组件 -->
  <div id="statusbar-container"></div>
  
  <!-- 页面内容区域 -->
  <div class="page-content">
    <!-- 用户资料卡片 -->
    <div class="bg-white p-4 flex items-center">
      <img src="https://i.pravatar.cc/150?img=32" alt="用户头像" class="avatar">
      <div class="ml-4">
        <h2 class="text-xl font-medium">王小明</h2>
        <p class="text-gray-500 text-sm mt-1">ID: bodyguard_8675</p>
        <div class="mt-2 bg-green-100 text-green-600 text-xs px-2 py-1 rounded-full inline-block">
          <i class="fas fa-crown mr-1"></i> 会员用户
        </div>
      </div>
      <div class="ml-auto">
        <button class="text-gray-500">
          <i class="fas fa-chevron-right"></i>
        </button>
      </div>
    </div>
    
    <!-- 个人数据概览 -->
    <div class="bg-white mt-3 p-4">
      <h3 class="font-medium mb-3">我的身体数据</h3>
      <div class="grid grid-cols-3 gap-4">
        <div class="text-center">
          <div class="text-xl font-bold text-green-600">66.5<span class="text-sm font-normal">kg</span></div>
          <div class="text-xs text-gray-500 mt-1">当前体重</div>
        </div>
        <div class="text-center">
          <div class="text-xl font-bold text-green-600">22.8</div>
          <div class="text-xs text-gray-500 mt-1">BMI指数</div>
        </div>
        <div class="text-center">
          <div class="text-xl font-bold text-green-600">10<span class="text-sm font-normal">%</span></div>
          <div class="text-xs text-gray-500 mt-1">体脂率</div>
        </div>
      </div>
    </div>
    
    <!-- 目标设置 -->
    <div class="bg-white mt-3 p-4">
      <h3 class="font-medium mb-3">我的健康目标</h3>
      <div class="bg-green-50 p-3 rounded-lg mb-3">
        <div class="flex justify-between items-center">
          <div>
            <div class="text-sm">目标体重</div>
            <div class="font-bold text-green-600">63.0 kg</div>
          </div>
          <div>
            <div class="text-sm">当前进度</div>
            <div class="font-bold text-green-600">74%</div>
          </div>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2 mt-2">
          <div class="bg-green-600 h-2 rounded-full" style="width: 74%"></div>
        </div>
        <div class="text-xs text-gray-500 mt-1">
          <span>起始: 70.0kg</span>
          <span class="float-right">还差: 3.5kg</span>
        </div>
      </div>
      <button class="w-full bg-white border border-green-500 text-green-500 py-2 rounded-lg font-medium">
        调整目标
      </button>
    </div>
    
    <!-- 设置菜单 -->
    <div class="bg-white mt-3 rounded-t-xl overflow-hidden">
      <div class="menu-item">
        <div class="menu-icon bg-blue-100 text-blue-500">
          <i class="fas fa-bell"></i>
        </div>
        <div class="flex-grow">提醒设置</div>
        <div>
          <i class="fas fa-chevron-right text-gray-400"></i>
        </div>
      </div>
      
      <div class="menu-item">
        <div class="menu-icon bg-purple-100 text-purple-500">
          <i class="fas fa-user-plus"></i>
        </div>
        <div class="flex-grow">邀请好友</div>
        <div>
          <i class="fas fa-chevron-right text-gray-400"></i>
        </div>
      </div>
      
      <div class="menu-item">
        <div class="menu-icon bg-green-100 text-green-500">
          <i class="fas fa-crown"></i>
        </div>
        <div class="flex-grow">会员权益</div>
        <div>
          <i class="fas fa-chevron-right text-gray-400"></i>
        </div>
      </div>
      
      <div class="menu-item">
        <div class="menu-icon bg-amber-100 text-amber-500">
          <i class="fas fa-trophy"></i>
        </div>
        <div class="flex-grow">我的成就</div>
        <div>
          <div class="text-xs text-gray-400 mr-2">已获得3个</div>
          <i class="fas fa-chevron-right text-gray-400"></i>
        </div>
      </div>
    </div>
    
    <div class="bg-white mt-px overflow-hidden">
      <div class="menu-item">
        <div class="menu-icon bg-red-100 text-red-500">
          <i class="fas fa-heart-pulse"></i>
        </div>
        <div class="flex-grow">健康数据同步</div>
        <div>
          <label class="toggle-switch">
            <input type="checkbox" checked>
            <span class="toggle-slider"></span>
          </label>
        </div>
      </div>
      
      <div class="menu-item">
        <div class="menu-icon bg-gray-100 text-gray-500">
          <i class="fas fa-gear"></i>
        </div>
        <div class="flex-grow">通用设置</div>
        <div>
          <i class="fas fa-chevron-right text-gray-400"></i>
        </div>
      </div>
      
      <div class="menu-item">
        <div class="menu-icon bg-cyan-100 text-cyan-500">
          <i class="fas fa-circle-info"></i>
        </div>
        <div class="flex-grow">关于我们</div>
        <div>
          <i class="fas fa-chevron-right text-gray-400"></i>
        </div>
      </div>
    </div>
    
    <div class="mt-8 mb-4 text-center text-gray-500 text-sm">
      <button class="px-8 py-2 border border-gray-300 rounded-full">
        退出登录
      </button>
    </div>
  </div>
  
  <!-- 导入底部导航栏组件 -->
  <div id="tabbar-container"></div>
  
  <script>
    // 加载状态栏组件
    fetch('../components/statusbar.html')
      .then(response => response.text())
      .then(data => {
        document.getElementById('statusbar-container').innerHTML = data;
      });
    
    // 加载底部导航栏组件
    fetch('../components/tabbar.html')
      .then(response => response.text())
      .then(data => {
        document.getElementById('tabbar-container').innerHTML = data;
      });
  </script>
</body>
</html> 